<template>
  <el-dialog v-model="dialogVisible" :title="title" width="800px" :append-to-body="true" :before-close="handleClose">
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm" status-icon>
       <el-form-item label="模板名称" prop="templateName">
        <el-input
          v-model="ruleForm.templateName"
          placeholder="请输入"
        />
       </el-form-item>
      <el-form-item label="合同模板" prop="template">
        <Editors ref="editorRef" :height="'500px'" :width="'100%'" :value="ruleForm.template" @updateValue="getValue"></Editors>
      </el-form-item>
      
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCloses(ruleFormRef)">取消</el-button>
        <el-button type="primary" @click="submit(ruleFormRef)">
          确 认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessage, FormInstance } from 'element-plus'
import { REQUEST } from '@/api/request'
import Editors from '@/components/editorht.vue'
import HTTP_URI from '@/api/base_url'
  const headers = ref({
  'Token': getToken()
})
const ruleFormRef = ref<FormInstance>()
const title = ref('')
import { store } from '@/store'
import { getToken } from '@/plugins/cookie'
const dialogVisible = ref(false)
const emits = defineEmits(['ok'])
const ruleForm = ref({
  id:'',
  templateName:'',
  houseId:store.state.userInfo.houseId,
  template: '',
})
const editorRef = ref()
const options = ref([])
const rules = ref({
 template: [
      { required: true, message: '请输入合同模板', trigger: 'blur' }
    ],
  templateName: [
      { required: true, message: '请输入模板名称', trigger: 'blur' }
    ]
})
const openModal = (t: any,  e: any) => {
  ruleForm.value = {
    id: '',
    templateName: '',
    houseId: store.state.userInfo.houseId,
    template: '',
  }
  dialogVisible.value = true
  title.value = t
  if (e) {
    ruleForm.value = e
  }
}
const getValue = (val: any) => {
    // ruleForm.value.template = val
  }
const handleAvatarSuccess = (response: any) => {
  ruleForm.value.officialSeal = response.data.url
}

const beforeAvatarUpload = (rawFile: any) => {
  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
    ElMessage.error('上传图片格式仅支持jpg、png')
    return false
  } else if (rawFile.size / 1024 / 1024 > 10) {
    ElMessage.error('图片大小不能超过 10MB')

    return false
  }
  return true
}
const handleClose = () => {
  dialogVisible.value = false
  emits('ok')
}
const handleCloses = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  emits('ok')
  dialogVisible.value = false
}
const submit = async (formEl: FormInstance | undefined) => {
  console.log(editorRef.value.data.content)
  ruleForm.value.template = editorRef.value.data.content
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    
    if (valid) {
        REQUEST.POST(title.value == '新增模板'?'TEMPLATEADD':'TEMPLATEEDIT', ruleForm.value).then((res: any) => {
          if (res.status === 200) {
            ElMessage({
              type: 'success',
              message: '操作成功！'
            })
            dialogVisible.value = false
            formEl.resetFields()
            emits('ok')
          } else {
            ElMessage({
              type: 'warning',
              message: res.message
            })
          }
        })
        

      }
  })
}
defineExpose({ openModal })
</script>

<style lang="scss" scoped>

.avatar-uploaders {
  width: 120px;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px #dcdfe6 dashed;
  cursor: pointer;
  border-radius: 5px;
}

.avatar-uploaders:hover {
  border: 1px #409eff dashed;
}

.avatar-uploader-icon {
  font-size: 32px;
  color: #cccccc;
}

.avatar-uploaders .avatar {
  width: 120px;
  height: 120px;
  display: block;
}
</style>
